<!DOCTYPE html>
<!--
Copyright (c) 2012 Google. Licensed under the Apache License, Version 2.0.
-->
<html>
  <head>
    <style>
      body {
        font-family: 'Arial', sans-serif;
        font-size: 13px;
        margin: 0.5em;
        min-width: 300px;
      }
      :link, :visited {
        color: #36c;
      }
      h1 {
        font-size: 125%;
        font-weight: normal;
        margin: 0;
      }
      #image {
        display: block;
        float: left;
        margin-right: 10px;
        outline: none;
      }
      #image img {
        width: 50px;
        height: auto;
      }
      #image + div {
        margin-left: 60px;
      }
      hr {
        border: 0;
        border-bottom: 1px solid #ddd;
      }
      div {
        margin-bottom: 0.5em;
      }
    </style>

    <script src="functions.js"></script>
    <script>
      function displayProfile(id) {
        var request = {method:'getProfileData',profileId:id};
        chrome.extension.sendRequest(request, function(profile) {
          document.querySelector('#image img').setAttribute('src', profile.image.url);
          document.querySelector('#displayName').innerText = profile.displayName;
          if (profile.tagline) {
            document.querySelector('#tagline').innerText = profile.tagline;
          }
          var links = document.querySelectorAll('.profileLink');
          for (var i=0; i<links.length; i++) {
            links[i].setAttribute('href', profile.url);
            links[i].setAttribute('target', '_blank');
          }

          // company
          if (profile.organizations) {
            for (var i=0; i<profile.organizations.length; i++) {
              var org = profile.organizations[i];
              if (org.type == 'work') {
                var company = '<b>Employment:</b> ' + org.name;
                if (org.title) {
                  company += ' (' + org.title + ')';
                }
                document.querySelector('#employment').innerHTML = company;
                break;
              }
            }
          }

          // location
          if (profile.placesLived) {
            var placeName;
            for (var i=0; i<profile.placesLived.length; i++) {
              var place = profile.placesLived[i];
              if (!placeName || place.primary) {
                placeName = place.value;
              }
            }
            if (placeName) {
              document.querySelector('#location').innerHTML = '<b>Location:</b> ' +
                '<a href="http://maps.google.com/maps?q=' + placeName + '" target="_blank">' + placeName + '</a>';
            }
          }
        });
      }

      (function() {
        chrome.windows.getCurrent(function(win) {
          chrome.tabs.query({active:true, windowId:win.id}, function(tabs) {
            var request = {'method':'getProfileId', tab:tabs[0]};
            chrome.extension.sendRequest(request, function(response) {
              displayProfile(response.id);
            });
          });
        });
      })();
    </script>
  </head>
  <body>
    <a id="image" href="" class="profileLink"><img/></a>
    <div>
      <a href="" class="profileLink"><h1 id="displayName"></h1></a>
      <div id="tagline"></div>
      <hr/>
      <div id="employment"></div>
      <div id="location"></div>
    </div>
  </body>
</html>
